The Parent Child Widget

What is the Parent Child Widget?

As part of FRTB the Parent Child Widget allows users to create What-If scenarios for different groupings of desks and books in a rich visual way. With this widget users can move books or desks. Users can save modifications to the underlying datastore under different datastore branches. Each modification's effect on various measures to an existing or new branch can be viewed on Pivot or Tabular tables. The Parent Child Widget visualizes the desk and book relationships in a horizontal tree hierarchy which is easy to understand and conceptualize.

Terminology

Throughout this document certain terminology will be used. Here is a brief clarification of terms used:

• Children: The immediate descendants of a node. Every descendant that is not immediately connected to the node via a link is not a child of that node.
• Descendants: Any node that is contained in the subtree of another node if that node was the root of that subtree. It will always be to the right of the current node.
• Subtree: Any series of nodes that can split off from the entire tree to form a new tree where one node can become the root of all of its descendants inside that tree.
• Ancestors: If this node can be the descendant of any other node then that other node is the ancestor of this node. It will always be to the left of the current node.

Some booking-specific terminology is also used:

• Groups: Any high level grouping of nodes that is neither a desk or book. Groups can have desks or other groups as children of itself.
• Desks: A desk is simply a grouping of books. Desks can have a specific legal entity that affects the status of all books under it. Desks can only have books as children.
• Books: A grouping of trades and assets. A book can contain only other books as children.

The Widget Layout

The layout of the widget is fairly simple and only has 3 major sections. In addition to the tree itself, you can use the context menu to perform your changes.

The first major section of the tree is the control panel on the top left. On this control panel you can switch between branches, save modifications performed on the tree, create new branches or reset your current branch. 

The second major section of the widget is the tree area. This is where you pan/zoom your currently loaded tree, move nodes around and open the context menu. On the top right you can also find a simple legend.

For every node you hover over, if you right-click on it you can also bring up a context menu with some options.

The third major section of the widget is the standard ActiveUI container hamburger which allows you to clear, remove, or maximize the current container which the widget resides in.

How to Operate the Parent Child Widget.

Managing and creating branches

Managing branches on this widget is handled mainly on the control panel on the top left.

Here you can find the branch dropdown, the Commit As... button and the Commit button.

Switching Between Branches

When you open the widget for the first time the widget will ping the FRTB server for any existing branches on the datastore. For all branches that exist, the dropdown will be populated with them, allowing users to switch between them. When you select a particular branch, the widget loads the current tree that exists for that branch in the current datastore.

NOTE: If you have not saved your previous tree, all modifications you made will be lost when loading different branches. Also if no tree data is loaded, then the tree created will contain a singular "empty node" indicated with a "E" in its center.

Committing to a Branch

The Commit button allows you to save your current changes from your tree to the currently selected branch on the backend. This button will only be enabled if the modifications you made to the current tree actually change the state of the tree from its original load from the backend or from its last save to the backend. If you move a book to another desk, for example, the button will be enabled, but if you move the book back underneath its original desk the button will be disabled again because the tree has returned to its initial state. Saving the tree is part of a WhatIf submission and clicking the button will give you an option to change the definition name of the current WhatIf submission. Clicking OK when the dialog comes up will continue the save with the user created definition name (or a default if none was provided.)

Creating Branches

Whether you have made changes or not to the current tree, you can always make a new branch from it. Use the Commit As... button .

You will then have the option to name and create a new branch. As soon as you create your new branch, it will be added to the branch selection dropdown and will be selected.

As with the Commit action, any changes you made to the tree will be reflect in this new branch.

Traversing the tree

The Canvas:

The second (and biggest) section of the widget contains the tree area. Here you can think the entire section as a canvas that you can move the tree across. If you hold down the left mouse button on the canvas you can pan the currently loaded tree around by moving your mouse. If you hover over the canvas and scroll your mouse wheel you can zoom in and out of the currently selected tree to its minimum and maximum zoom levels. 

Opening and Closing Nodes:

Every time a new tree loads, the entirety of the tree will not be shown all at once. Instead the root node will be "open" while its immediate children will be "closed." Closed children can be opened to reveal the node's current immediate descendants on the tree while an opened node can be closed to hide all of its descendants. To open a closed node, left click on it or the nodes name. Left clicking will also close a currently opened node. Whenever a new node enters or leaves the tree through any operation, an animation will show it enter or leave. Exiting nodes can not be operated on anymore, but you operate on a entering node as you come onto the screen. All child nodes that are revealed through a "open" operation will start off as closed.

Opening the Context Menu:

The context menu can be brought up for any node by right clicking on it or its name. The context menu will contain a number of operations available for the current node and some operations will only appear under certain conditions.

Expanding Entire Subtrees:

One easy way of traversing the tree without opening every single node is to expand or "open" all nodes underneath a currently selected node. This is called "expanding a subtree" and can be done any time in the context menu. If you right click a node and select the "Expand Entire Subtree" option, you will open all nodes that are descendants of the current node.

Warnings and Best Practices:

While it maybe benefitial to close parts of the tree for focusing only on the parts the user wants to operate on, there is yet another practical reason for limiting how many nodes are rendered on the screen. This Widget can support hundreds of nodes open at once but at a certain point, when opening up nodes in the thousands range, the widget can slow down. Only operate as many nodes as are necessary for you to operate on for the best experience with this widget. Rendering 800 nodes is the maximum amount we recommend to open at any one time. To help prevent this scenario from occuring the widget supports two warning dialogs that can appear if a users actions violate certain thresholds. If the user attempts to open more than X nodes then that operation can be halted and the user will be asked if he wishes to continue. Another dialog is also available if the user attempts to open too many subtrees for any given level. For example, if the user tries to open more then 3 subtrees per level the warning dialog will appear. Both dialogs can appear one after the other if an operation triggers both.

Filtering Children:

A more complex way of opening a node for only specific children can be done via filtering the node. In the context menu of a node (after right clicking on the node) you can find the option "Filter Children." Clicking this option will give you a dialog asking by what string do you want to filter the nodes current children. Any string provided here will be matched against the names of all the current node's children; if a string provided is a substring of the name then that is considered a match. Every child that matches will be revealed while all nodes that don't match will be hidden. This is a great way of showing only certain books you are interested in. Any node that is currently open but filtering children will have a violet center and will have a filtering label shown to the left of the node.

Moving Nodes.

Dragging and Dropping:

For an intuitive way of moving nodes around, and if the node you want to move is in the same screen as the destination where you want to place it, you can drag and drop nodes around. Simply hold down the left mouse button when hovering over a node and move it around. This will trigger the drag action on the node and the node will follow along with your mouse as though you are holding it. Moving a node will not move its descendants and the links that connect the node to its parent/children will not be removed. If you release the left mouse button while over empty space on the canvas then the node will return to its original position on the tree.  If you hover the node over another node you might see a red link going from the dragging node to the other node you are hovering over. Letting go of your mouse button while hovering over another node that is now linked via a red link will cause the node you are dragging to be placed as a child of the other node. This is called a "drop." All of the dragged nodes subtree will move along with the node after it has been dropped, showing the new structure of your tree. This may trigger the save button to enable or disable depending on whether the state of the tree is equal to its inital load. If you try to hover a dragging node over another node and don't see the red link connecting them that indicates that, for whatever reason, the dragging node cannot be placed as a child of the other node. Attempting to drop a node onto another that has no red link will trigger a warning message explaining why this action could not be performed and the dragging node will be placed in its original position within the main tree.

Context Menu Cut and Paste:

Alternatively, if the destination node is to far away to easily drag and drop to, or if you need to drag and drop many nodes at once, you can use the cut/paste options. Cutting and uncutting can be found in the context menu and act almost exactly like dragging and dropping for the most part. The main benefit though is that when you cut a node you don't need to hold down any mouse buttons and you can select many nodes to be cut at once to then moved around. To cut, pull up the context menu (right click on the node to be cut.) Afterwords click on the "Cut" option and the node will become transparent. A transparent node indicates that the node is currently cut, simular to how most UIs for Operating Systems are done. Once you have at least one node that is cut, the option "Paste: x" will appear on additional context menus. Clicking on "Paste: x" on another node will perform an operation simular to a drop on that node. The node(s) which had been cut will then be placed under the parent as children/descendants. "Paste: x" will show either the single node that had been cut or will generically list how many nodes will be pasted if more then one node had been cut. 

Uncutting:

Any node that is currently cut can also be uncut via the context menu. Simply bring up the context menu for a cut node and select "uncut." This will return the node to its original state and will have to be cut again in order to be pasted. To uncut all nodes simultaneously bring up the context menu for a cut node and press the option "Stop Cutting."

Hot Key Cutting and Uncutting:

Because the context menu way of cutting can be a little tedious, hot keys are availalbe for quickly cutting or uncutting nodes. Simply hover over a node you wish to cut and hold shift while you click on the node. This button combination will quickly trigger the node to become cut and transparent. Performing the button combinations while the node is currently cut will cause it to be uncut. Unfortunately there is no current way to hotkey a paste, so you still have to bring up the context menu to perform that action.

Other Features:

Tree Resizing:

All items within the canvas of this widget can be resized without losing the items' aspect ratio. In other words, resizing the container or browser window in which the canvas exists will not stretch the legend or tree.

Resetting the Tree:

On the rightmost part of the control panel is the 'reset tree' button. Clicking this button will reset the tree to its last unmodified state, whether that was when the tree loaded or when it was last saved. This button is always enabled.

Tree Legend

Groups/Desks/Books:

To differentiate nodes between books, desks and groupings of desks the tree color-codes these nodes. Because the tree is theme-based, this means themes set up on the UI will also change these differentiating colors. Please reference the onscreen legend to differentiate what types of nodes are what colors, based on your current theme. All nodes regardless of their type will have a label with them. This label will simply have the name of the group/desk/book associated with the node and can be called the "name label."

Filtered Nodes:

Filtered nodes can be identified with two indicators. First, a filtered node will have a magenta center, indicating the node is definitely filtered and not showing all of its current children. Second, the node will show a new label under the name label specifically shown for what string is currently being used to filter children for the node. This label will also be the same color as the centering color of the node.

Original Root Node and Empty Node:

The original root node of the total tree will always be indicated, with an "R" in the center of it. Even if you make another node a "root" by focusing in on it it will not aquire the "R" in its center, as it is not the original root node for the entire tree. This is to help users to clarify whether they are focused on specific root or whether they are on the original root of the tree. Further, the original root node can not be moved, cut or modified though it can be filtered. If a new tree has not been fully loaded yet, or if a loaded tree contains no nodes you will see a tree with a singular node and an "E" in its center. This is the empty node and usually used as an indicator for users that there are no nodes that exist for this branch or none have been loaded yet.